
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme-sandstone.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Cardo:400,400italic" rel="stylesheet" type="text/css">
        <link href="css/font-cardo.css" rel="stylesheet" type="text/css">
    </head>

    <body>

				
		<div class="nav-container">
			
			
		
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		
			
			
		
			
		
		</div>
		
		<div class="main-container">
					
			<section class="hero-slider parallax">
				<ul class="slides">
					<li class="overlay text-center fullscreen-element">
				
						<div class="background-image-holder parallax-background">
							<img alt="Slide Background" class="background-image" src="img/hero31.jpg">
						</div>
				
						<div class="container vertical-align">
							<div class="row">
								<div class="col-md-10 col-md-offset-1">
									<h1 class="text-white jumbo-h1 uppercase">Bespoke<br> Design</h1>
									<h5 class="text-white">Machine offers a <em>higher</em> level of design and craftsmanship.</h5>
								</div>
							</div>
						</div>
					</li><!--end of slide-->
				</ul>
			</section>
			
			<section class="large-pad dark-bg text-hero-2">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-md-offset-2 col-sm-12">
							
							<p class="super-lead text-white">
								Machine is the distillation of our vision to deliver a truly premium experience to web professionals and newcomers alike. Taking cues from the contemporary and authentic, Machine assembles the best of the modern web in one remarkable template.  
							</p>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="team-2">
				<div class="container">
					<!--end of row-->
				
					<div class="row">
							<div class="col-md-4 col-sm-6 team-member">
								<img alt="team member" src="img/rustic1.jpg">
								<h3>Lake's Edge</h3>
								
								<p>
									Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.
								</p>
							</div>
						
							<div class="col-md-4 col-sm-6 team-member">
								<img alt="team member" src="img/rustic2.jpg">
								<h3>At Sunrise</h3>
								
								<p>
									Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.
								</p>
							</div>
						
							<div class="col-md-4 col-sm-6 team-member">
								<img alt="team member" src="img/rustic3.jpg">
								<h3>Daring Wanderer</h3>
								
								<p>
									Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.
								</p>
							</div>
					</div><!--end of row-->
				
		
				</div><!--end of container-->
			</section>
			
			<section class="double-pad parallax">
				<div class="background-image-holder overlay">
					<img alt="Slide Background" class="background-image" src="img/hero19.jpg">
				</div>	
			
				<div class="container">
						<div class="row">
							<div class="col-sm-7 col-md-5">
								<h2 class="text-white">Build stunning layouts.<br> Customise content easily.</h2>
								<p class="text-white lead">
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
								</p>
							</div>
						</div><!--end of row-->
				</div><!--end of container-->
			
			</section>
			
			<section class="info-panels">
				<div class="container">
					<div class="row">
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>Work Inquiries</h4>
								<p class="lead">
									We are recruiting!<br> Drop us a line if you're interested
								</p>
								<a class="text-link" href="#">work@machine.net <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>General Inquiries</h4>
								<p class="lead">
									Complete our project planner<br> and we'll be in touch
								</p>
								<a class="text-link" href="#">hello@machine.net <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>Come Visit Us</h4>
								<p class="lead">
									They come for the coffee<br> and stay for sweet designs.
								</p>
								<p>
									300 Collins St.<br>
									Melbourne, 3000
								</p>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			<footer class="footer-4">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<ul class="social-links">
								<li><a href="#">Twitter</a></li>
								<li><a href="#">Facebook</a></li>
								<li><a href="#">Instagram</a></li>
								<li><a href="#">Dribbble</a></li>
							</ul>
						</div>
					</div><!--end of row-->
			
					<div class="row">
						<div class="col-sm-12 text-center">
							<a href="#">
								<img alt="logo" class="logo" src="img/logo-square-dark.png">
							</a>
							<span>© Copyright 2014 Medium Rare</span>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->	
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				